import { getWebPath } from './request';

// 文档：braft-editor https://www.yuque.com/braft-editor/be/gz44tn
// 文档：braft-editor https://github.com/margox/braft-editor

// Braft Editor扩展模块包【功能如下】  https://github.com/margox/braft-extensions#%E8%A1%A8%E6%A0%BC%E6%A8%A1%E5%9D%97
// 目前包含的模块列表
// 表格模块 Table
// Markdown语法支持 Markdown
// 代码高亮模块 CodeHighlighter
// 高级取色器模块 ColorPicker
// 表情包扩展模块 Emoticon
// 输入字数限制模块 MaxLength
// 标题区块(h1-h6)id模块 HeaderId


export const handleEditorupload = param => {
  const serverURL = `${getWebPath('/api/fileUpload')}`;
  const xhr = new XMLHttpRequest();
  const fd = new FormData();
  const successFn = () => {
    const blkRet = JSON.parse(xhr.responseText);
    param.success({
      url: blkRet.object,
    });
  };

  const progressFn = event => {
    param.progress((event.loaded / event.total) * 100);
  };

  const errorFn = () => {
    param.error({ msg: '上传失败' });
  };

  xhr.upload.addEventListener('progress', progressFn, false);
  xhr.addEventListener('load', successFn, false);
  xhr.addEventListener('error', errorFn, false);
  xhr.addEventListener('abort', errorFn, false);

  fd.append('myfile', param.file);
  fd.append('isImage', 'false');
  fd.append('moduleName', 'ueditor');
  xhr.open('POST', serverURL, true);
  xhr.send(fd);
};

// eslint-disable-next-line import/prefer-default-export
export const editorProps = {
  height: 500,
  media: {
    // eslint-disable-next-line no-use-before-define
    uploadFn: handleEditorupload,//如果未指定uploadFn，添加到媒体库的图片将会自动转换为base64的形式，而视频和音频则无法被添加到媒体库。
  },
  imageControls: [
    'float-left', // 设置图片左浮动
    'float-right', // 设置图片右浮动
    'align-left', // 设置图片居左
    'align-center', // 设置图片居中
    'align-right', // 设置图片居右
    'link', // 设置图片超链接
    'size', // 设置图片尺寸
    'remove' // 删除图片
  ],
  fontFamilies: [],//考虑到系统平台之间的差异，实际上不太推荐在富文本中设置文字字体，所以编辑器默认不展示字体选择器控件。
};

/**
 * Braft Editor 编辑增加预览功能
 */
export const editorPreview = (html) => {
  // eslint-disable-next-line no-param-reassign
  html = `<!Doctype html>
  <html>
  <head>
    <title>Preview Content</title>
    <style>
      html,body{
      height: 100%;
      margin: 0;
      padding: 0;
      overflow: auto;
      backfakeDataApi()}/apiground-color: #f1f2f3;
    }
      .container{
      box-sizing: border-box;
      width: 1000px;
      max-width: 100%;
      min-height: 100%;
      margin: 0 auto;
      padding: 30px 20px;
      overflow: hidden;
      background-color: #fff;
      border-right: solid 1px #eee;
      border-left: solid 1px #eee;
    }
      .container img,
      .container audio,
      .container video{
      max-width: 100%;
      /*height: auto;*/
    }
      .container p{
      white-space: pre-wrap;
      min-height: 1em;
    }
      .container pre{
      padding: 15px;
      background-color: #f1f1f1;
      border-radius: 5px;
    }
      .container blockquote{
      margin: 0;
      padding: 15px;
      background-color: #f1f1f1;
      border-left: 3px solid #d1d1d1;
    }
    </style>
  </head>
  <body>
  <div class="container">${html}</div>
  </body>
  </html>
`;
  if (window.previewWindow) {
    window.previewWindow.close();
  }

  window.previewWindow = window.open();
  window.previewWindow.document.write(html);
  window.previewWindow.document.close();
}

